﻿@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.ButtonsDemo

<abp-component-demo-section title="Basics" view-path="@ButtonsDemoViewComponent.ViewPath">
    <abp-button text="Default" />
    <abp-button button-type="Primary" text="Primary" />
    <abp-button button-type="Secondary">Secondary</abp-button>
    <abp-button button-type="Success">Success</abp-button>
    <abp-button button-type="Danger">Danger</abp-button>
    <abp-button button-type="Warning">Warning</abp-button>
    <abp-button button-type="Info">Info</abp-button>
    <abp-button button-type="Light">Light</abp-button>
    <abp-button button-type="Dark">Dark</abp-button>
    <abp-button button-type="Link">Link</abp-button>
</abp-component-demo-section>

<abp-component-demo-section title="Outline" view-path="@ButtonsDemoViewComponent.ViewPath">
    <abp-button button-type="Outline_Primary">Primary</abp-button>
    <abp-button button-type="Outline_Secondary">Secondary</abp-button>
    <abp-button button-type="Outline_Success">Success</abp-button>
    <abp-button button-type="Outline_Danger">Danger</abp-button>
    <abp-button button-type="Outline_Warning">Warning</abp-button>
    <abp-button button-type="Outline_Info">Info</abp-button>
    <abp-button button-type="Outline_Light">Light</abp-button>
    <abp-button button-type="Outline_Dark">Dark</abp-button>
</abp-component-demo-section>

<abp-component-demo-section title="Sizes" view-path="@ButtonsDemoViewComponent.ViewPath">
    <abp-button size="Large" button-type="Primary" text="Large button" />
    <abp-button size="Large" button-type="Secondary" text="Large button" />
</abp-component-demo-section>

<abp-component-demo-section title="Sizes" view-path="@ButtonsDemoViewComponent.ViewPath">
    <abp-button size="Small" button-type="Primary" text="Small button" />
    <abp-button size="Small" button-type="Secondary" text="Small button" />
</abp-component-demo-section>

<abp-component-demo-section title="Sizes" view-path="@ButtonsDemoViewComponent.ViewPath">
    <abp-button size="Block" button-type="Primary" text="Block level button" />
    <abp-button size="Block" button-type="Secondary" text="Block level button" />
</abp-component-demo-section>

<abp-component-demo-section title="Active State" view-path="@ButtonsDemoViewComponent.ViewPath">
    <abp-button size="Large" button-type="Primary" class="active" text="Primary button" />
    <abp-button size="Large" button-type="Secondary" class="active" text="Button" />
</abp-component-demo-section>

<abp-component-demo-section title="Disabled State" view-path="@ButtonsDemoViewComponent.ViewPath">
    <abp-button size="Large" button-type="Primary" disabled="true" text="Primary button" />
    <abp-button size="Large" button-type="Secondary" disabled="true" text="Button" />
</abp-component-demo-section>

<abp-component-demo-section title="Icons" view-path="@ButtonsDemoViewComponent.ViewPath">
    <abp-button button-type="Warning" icon="pencil" text="Edit" />
    <abp-button button-type="Info" icon-type="FontAwesome" icon="info" text="Information" />
</abp-component-demo-section>
